<!--
 * Copyright © 2022 XXXXXXXXX
 * @Author: zhangxiang
 * @Date: 2022-09-13 10:57:59
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-11-08 16:55:47
 * @Description:
 *
-->

<template>
  <div class="event-detail-container">
    <el-row type="flex" align="middle" class="top">
      <span class="name">事件名称</span>
      <el-input
        v-model="reason"
        style="width: 200px; margin-left: 10px; margin-right: 20px"
        size="medium"
        class="input"
        placeholder="请输入事件名称"
        clearable
        @clear="clearClick"
        @keyup.enter.native="queryClick"
      />
      <!-- 服务商&集群 选择 -->
      <CloudCluster
        :cloud-cluster-obj.sync="cloudClusterObj"
        :cloud-vendor-title="'集群'"
        :k8s-cluster-name-title="''"
      />
      <el-button
        size="medium"
        type="primary"
        @click="queryClick"
      >搜索</el-button>
      <el-button size="medium" @click="resetClick">重置</el-button>
      <el-button
        size="medium"
        style="margin-left: auto"
        type="primary"
        :loading="exportLoading"
        @click="exportClick"
      >导出</el-button>
    </el-row>
    <!-- 列表 -->
    <el-table
      v-loading="loading"
      :data="list"
      header-cell-class-name="listHeaderCell"
      :header-cell-style="{ background: '#F3F3F3', color: '#696969' }"
    >
      <el-table-column prop="lastSeen" label="最近发生时间" min-width="130" />
      <el-table-column
        prop="reason"
        label="事件名称"
        min-width="130"
        show-overflow-tooltip=""
      />
      <el-table-column prop="kind" label="资源类型" min-width="130" />
      <el-table-column
        prop="namespace"
        label="命名空间"
        min-width="150"
        show-overflow-tooltip=""
      />
      <el-table-column
        prop="object"
        label="调用对象"
        min-width="200"
        show-overflow-tooltip=""
      />
      <el-table-column
        prop="message"
        label="消息"
        min-width="200"
        show-overflow-tooltip=""
      />
      <el-table-column prop="type" label="事件类型" min-width="100" />
    </el-table>
    <el-row type="flex" justify="end" style="margin-top: 20px">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :page-sizes="[10, 15, 20]"
        :page-size="pageSize"
        :current-page.sync="pageNum"
        :total="totalSize"
        @current-change="changePage"
        @size-change="sizeChange"
      />
    </el-row>
  </div>
</template>

<script>
import CloudCluster from '@/components/CloudCluster'
import { getK8sEventDetail, getK8sEventExport } from '@/api/cnap/statis-analysis'
import { isEmptyString } from '@/utils/index'

export default {
  name: 'EventDetail',
  components: { CloudCluster },
  mixins: [],
  data() {
    return {
      cloudClusterObj: {
        cloudVendor: '', // 云服务商
        accountName: '', // 云账户
        clusterName: '' // 集群名称
      },
      reason: '', // 事件名称
      pageSize: 10, // 页大小
      pageNum: 1, // 页码
      lastPageNum: 1, // 之前页码
      totalSize: 0, // 总数
      loading: false,
      list: [], // 列表数据
      exportLoading: false
    }
  },
  computed: {},
  created() {
    this.initPageData()
  },
  methods: {
    /**
     * @description: 导出
     * @return {*}
     */
    exportClick() {
      this.exportLoading = true // 展示导出loading
      getK8sEventExport({
        providerName: this.cloudClusterObj.cloudVendor, // 云商
        accountName: this.cloudClusterObj.accountName, // 云商账号
        clusterName: this.cloudClusterObj.clusterName // 集群
      })
        .then((response) => {
          const fileNames =
            response.headers['content-disposition'].split("filename*=utf-8''") // 读取文件名
          const fileName =
            fileNames.length > 1
              ? decodeURIComponent(fileNames[1])
              : '事件详情.xlsx'
          const blob = new Blob([response.data], {
            type: 'application/vnd.ms-excel'
          }) // 新建blob
          const elementA = document.createElement('a') // 创建 element a
          elementA.style.display = 'none'
          elementA.href = window.URL.createObjectURL(blob)
          elementA.download = fileName
          document.body.appendChild(elementA)
          elementA.click() // 模拟点击
          window.URL.revokeObjectURL(elementA.href) // 释放内存
        })
        .catch((err) => {
          console.log(err)
          this.$message.error('导出失败，请稍候再试') // 导出失败
        })
        .finally(() => {
          this.exportLoading = false // 取消loading
        })
    },
    /**
     * @description: size变化
     * @param {*} size
     * @return {*}
     */
    sizeChange(size) {
      this.pageSize = size
      this.getK8sEventDetail(1) // 请求数据
    },
    /**
     * @description: 切换页码
     * @param {*} pageNum
     * @return {*}
     */
    changePage(pageNum) {
      this.getK8sEventDetail(pageNum, true) // 请求数据
    },
    /**
     * @description: 清除名称
     * @return {*}
     */
    clearClick() {
      this.reason = ''
      this.getK8sEventDetail(1) // 请求数据
    },
    /**
     * @description: 重置
     * @return {*}
     */
    resetClick() {
      this.reason = ''
      this.cloudClusterObj = {
        cloudVendor: '', // 云服务商
        accountName: '', // 云账户
        clusterName: '' // 集群名称
      }
      this.getK8sEventDetail(1) // 请求数据
    },
    /**
     * @description: 查询
     * @return {*}
     */
    queryClick() {
      this.getK8sEventDetail(1) // 请求数据
    },
    /**
     * @description: 获取事件详情
     * @return {*}
     */
    getK8sEventDetail(pageNum, isFromChangePage = false) {
      if (
        !isEmptyString(this.cloudClusterObj.cloudVendor) &&
        isEmptyString(this.cloudClusterObj.clusterName)
      ) {
        this.$message.warning({
          message: '请选择集群',
          duration: 1500
        })
        if (isFromChangePage) {
          this.pageNum = this.lastPageNum
        }
        return
      }
      this.pageNum = pageNum
      this.lastPageNum = this.pageNum
      getK8sEventDetail({
        providerName: this.cloudClusterObj.cloudVendor, // 云商
        accountName: this.cloudClusterObj.accountName, // 云商账号
        clusterName: this.cloudClusterObj.clusterName, // 集群
        reason: this.reason,
        pageNo: this.pageNum,
        pageSize: this.pageSize
      })
        .then((res) => {
          if (res.data) {
            this.totalSize = res.data.totalSize
            this.list = Array.isArray(res.data.data) ? res.data.data : []
          } else {
            this.totalSize = 0
            this.list = []
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * @description: 初始化数据
     * @return {*}
     */
    initPageData() {
      this.loading = true
      this.pageNum = 1
      this.getK8sEventDetail(1) // 请求数据
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.event-detail-container {
  .top {
    margin-bottom: 20px;
    .name {
      .textStyle(14px , 400, #4a4a4a);
      line-height: 20px;
    }
  }

  .el-table::before {
    background-color: #e9e9e9;
  }
  /deep/ .listHeaderCell {
    height: 40px;
    padding: 0;
    box-sizing: border-box;
    &:first-child {
      padding-left: 20px;
    }
  }

  /deep/ .el-table__body {
    .el-table__row td {
      height: 40px;
      padding: 0;
      &:first-child {
        padding-left: 20px;
      }
    }
  }
}
</style>
